<script>
import TechStackEditor from "./TechStackEditor.vue";
import {mapState} from "vuex";
import {Plus} from "@element-plus/icons-vue";

export default {
  name: 'ProjectEditor',
  components: {Plus, TechStackEditor},
  props: {
    modelValue: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    ...mapState(['stacks']),
    localValue: {
      set(val) {
        this.updateValue(val)
      },
      get() {return this.modelValue}
    }
  },
  methods: {
    getIcon(id) {
      const idx = this.stacks.findIndex((s) => s.id === id)
      return this.stacks[idx].style
    },
    updateValue(val) {
      this.$emit('update:modelValue', val)
    },
    insert(val) {
      const nv = this.modelValue
      nv.push(val)
      this.updateValue(nv)
    },
    remove(idx) {
      const nv = this.modelValue
      nv.splice(idx, 1)
      this.updateValue(nv)
    },
    addProject() {
      this.insert({})
    },
    beforeUpload(file) {
      console.log(file);
    }
  }
}
</script>

<template>
  <div class="grid grid-cols-2 gap-4">
    <div v-for="(proj,idx) in localValue" :key="idx" class="flex rounded-md p-2 bg-gray-100">
      <div class="w-full">
        <el-form-item label="项目名称" label-position="top">
          <el-input v-model="proj.name" size="large"/>
        </el-form-item>
        <el-form-item label="技术栈" label-position="top">
          <el-select multiple v-model="proj.stacks" default-first-option>
            <el-option v-for="(stack, idx) in stacks" :key="idx" :label="stack.name" :value="stack.id">
              <i :class="stack.style"/> {{stack.name}}
            </el-option>
            <template #label="{label,value}">
              <i :class="getIcon(value)"/> {{label}}
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="项目介绍" label-position="top">
          <el-input type="textarea" v-model="proj.description"></el-input>
        </el-form-item>
        <div class="flex justify-center">
          <el-button @click="remove(idx)" circle icon="Delete"></el-button>
        </div>
      </div>
    </div>
    <div>
      <el-button @click="addProject" circle icon="Plus"></el-button>
    </div>
  </div>
</template>

<style scoped>
</style>